<template>
	<app-layout class="u-topic">
		<view class="topic">
			<template v-if="topic.detail.length > 0">
				<block v-for="(temp, index) in topic.detail" :key="index">
					<template v-if="temp.id === 'video'">
						<view class="video-tp">
							<video :autoplay="true" :loop="true" :src="temp.data.url" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;" controls></video>
						</view>
					</template>
				</block>
			</template>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";
	import appRichText from "../../../components/basic-component/app-rich/parse";
	import appVideo from "../../../components/page-component/app-video/app-video.vue";
	import appImageAd from "../../../components/page-component/app-image-ad/app-image-ad.vue";
	import appHotspot from "../../../components/basic-component/app-hotspot/app-hotspot.vue";

	export default {
		name: "topic",
		components: {
			appRichText,
			appVideo,
			appImageAd,
			appHotspot
		},
		data() {
			return {
				topic: [],
				title:''
			};
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.title
			})
		},
		onLoad(options) {
			// console.log(options);
			this.loadData(options.id)
			if (options.title != undefined || options.title != null) {
				if (options.title != '') {
					this.title = options.title
					/* uni.setNavigationBarTitle({
						title: options.title
					}) */
				}
			}
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				title: this.topic.title,
				path: '/pages/video/videodetail/videodetail',
				params: {
					id: this.topic.id,
					title: this.topic.title
				}
			});
		},
		onShareTimeline() {
			return this.$shareTimeline({
				title: this.topic.title,
				query: {
					id: this.topic.id,
					title: this.topic.title
				}
			});
		},
		methods: {
			loadData(id) {
				this.$showLoading();
				this.$request({
					url: this.$api.topic.detail,
					data: {
						id: id
					}
				}).then(res => {
					this.$hideLoading();
					if (res.code == 0) {
						// console.log(res);
						this.topic = res.data.list
					}
				}).catch(e => {
					this.$hideLoading();
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.topic {
		background-color: #ffffff;

		.title {
			padding: #{28rpx} #{24rpx} #{44rpx} #{24rpx};
			font-size: #{42rpx};
		}

		.time {
			// margin-bottom: #{32rpx};
			font-size: $uni-font-size-general-two;
			color: $uni-general-color-two;
		}
	}

	.plr-24 {
		padding: 0 #{24rpx};
	}

	.bar {
		background-color: #ffffff;
		height: #{96rpx};
		width: 100%;
		border-top: #{1rpx} solid #e2e2e2;
		font-size: $uni-font-size-weak-one;
		color: $uni-general-color-two;

		image {
			width: #{40rpx};
			height: #{40rpx};
		}

		&>view {
			width: 50%;
		}
	}

	.u-topic {
		min-height: 100vh;
		background-color: #ffffff;
	}

	.video-tp {
		// margin-bottom: 32rpx;
	}
</style>
